<template>
  <!-- :style="{width:width,height:height} -->
  <div :id="id" :style="{width:width,height:height}"></div>
</template>
<script>
import resize from "@/utils/resize";
export default {
  mixins: [resize],
  data() {
    return {
      chart: null
    };
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  props: {
    id: {
      type: String,
      default: ""
    },
    width: {
      type: String,
      default: ""
    },
    height: {
      type: String,
      default: ""
    },
    J: {
      type: String,
      default: ""
    }
  },
  watch: {
    J(val) {
      if (val) {
        this.getChart(val);
      }
    }
  },
  mounted() {
    this.chart = this.$echarts.init(
      document.getElementById(this.id),
      "macarons"
    );
  },
  methods: {
    getChart(val) {
      this.chart.setOption({
        title: {
          text: "专利指数",
          left: "center",
          top: "middle",
          textStyle: {
            color: "#000",
            fontSize: "16",
            fontWeight: "bold"
          }
        },
        legend: {
          show: false
        },
        angleAxis: {
          max: 100,
          show: false
        },
        color: ["#514ab1"],
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        polar: {
          radius: 200,
          center: ["50%", "55%"]
        },
        series: [
          {
            type: "bar",
            roundCap: true,
            barWidth: 5,
            showBackground: true,
            backgroundStyle: {
              color: "#e3e6ef"
            },
            data: [val],
            coordinateSystem: "polar",
            name: "A",
            label: {
              show: true
            }
            // itemStyle: itemStyle,
          },
          {
            name: "统计",
            type: "gauge",
            splitNumber: 10, //刻度数量
            min: 0,
            max: 100,
            radius: "60%", //图表尺寸
            center: ["50%", "55%"],
            startAngle: 90,
            endAngle: -269.9999,
            axisLine: {
              show: false,
              length: 15,
              splitNumber: 5
              /* lineStyle: {
                            width: 0,
                            shadowBlur: 0,
                            color: [
                                [0, '#524bb3'],
                                [1, '#524bb3']
                            ]
                        } */
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: "#524bb3",
                width: 4
              },
              length: 15,
              splitNumber: 5
            },
            splitLine: {
              show: false
              /* length: 0,
                        lineStyle: {
                            color: '#0dc2fe',
                        } */
            },
            axisLabel: {
              show: false
            },
            pointer: {
              //仪表盘指针
              show: 0
            },
            detail: {
              borderColor: "#fff",
              shadowColor: "#fff", //默认透明
              shadowBlur: 2,
              offsetCenter: [0, "30%"], // x, y，单位px
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                color: "#514ab1",
                fontSize: 40
              },
              formatter: "{value}"
            },
            data: [
              {
                name: "",
                value: val
              }
            ]
          }
        ]
      });
    }
  }
};
</script>